<!Doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none;}
a{text-decoration:none;}

#box{width:730px;height:454px;margin:50px auto;position:relative;}
.list1{height:454px;width:454px;position:absolute;left:0;top:0;}
.list1 li{position:absolute;left:0;top:0;display:none;}
.list1 .li1{display:block;}
.links1{width:28px;heigth:62px;position:absolute;left:0;top:190px;background:#8db4c8;font-size:16px;
text-align:center;line-height:62px;color:#fff;opacity:.4;display:none;}
.links2{width:28px;heigth:62px;position:absolute;right:0;top:190px;background:#8db4c8;font-size:16px;
text-align:center;line-height:62px;color:#fff;opacity:.4;display:none;}
.list2{width:132px;height:26px;position:absolute;left:301px;bottom:0;}
.list2 a{display:block;width:18px;height:18px;border-radius:20px;background:#3e3e3e;margin-right:4px;float:left;
text-align:center;line-height:18px;color:#fff;font-size:16px;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
	var leth=$('li').length;
	//console.log(leth);
	var i=1;
	$('.list2>a').eq(i-1).css('background','#b61b1f');
	var timer=setInterval(f,1000);									//定时器
	function f(){
		if(i==leth){												//
			i=0;
		}
		if($('li').eq(i)){				//i=[1~5]
			$('li').fadeOut(1000);
			$('li').eq(i).fadeIn(1000);
			
		}else{														//
			$('li').fadeOut(1000);
			$('li').eq(0).fadeIn(1000);
		}
		$('.list2>a').css('background','#3e3e3e');
		$('.list2>a').eq(i).css('background','#b61b1f');
		//console.log(i);
		i++;	
	}
	
	$('#box').mouseover(function(){
		clearInterval(timer);
		//console.log(i);
		$('.links1').css('display','block');
		$('.links2').css('display','block');

	})
	$('.links1').click(function(){
		//console.log($('.links1').length);
		if(i<2){
			i=leth+1;
		}
		i=i-2;
		//console.log(i);
		f();
		});
	$('.links2').click(function(){
		f();
	});
	$('#box').mouseout(function(){								//
		timer=setInterval(f,1000);									//计时器继续之前的状态工作
		$('.links1').css('display','none');
		$('.links2').css('display','none');
		console.log(i);
	})
	$('.list2>a').hover(
		function(){
			console.log(this.text());
			// this(this.index()).css('background','#b61b1f')
			// i=this.index();
			// f();
		},
		function(){
			
		}
	)
})
</script>
</head>
<body>
<div id="box">
	<ul class="list1">
		<li class="li1"><a href="javascript:;"><img src="images/1.jpg"/></a></li>
		<li><a href="javascript:;"><img src="images/2.jpg"/></a></li>
		<li><a href="javascript:;"><img src="images/3.jpg"/></a></li>
		<li><a href="javascript:;"><img src="images/4.jpg"/></a></li>
		<li><a href="javascript:;"><img src="images/5.jpg"/></a></li>
		<li><a href="javascript:;"><img src="images/6.jpg"/></a></li>
	</ul>
	<a class="links1" href="javascript:;">&lt;</a>
	<a class="links2" href="javascript:;">&gt;</a>
	<div class="list2">
		<a href="javascript:;">1</a>
		<a href="javascript:;">2</a>
		<a href="javascript:;">3</a>
		<a href="javascript:;">4</a>
		<a href="javascript:;">5</a>
		<a href="javascript:;">6</a>
	</div>
</div>
</body>
</html>